import React, { useEffect, useState } from 'react'
import { useHistory, useLocation } from 'umi'
import { Button ,Row , Col, message , Card, Avatar} from 'antd'
import { LikeOutlined } from '@ant-design/icons';
import { getModification, getPublicDownloadUrl, likeModification } from '@/service/personal'





export default function Details () {

  const history:any = useHistory()
  const location:any = useLocation()
  const [detatilsData, setDetatilsData] = useState<any>({})
  const [url, setUrl] = useState('https://ts1.cn.mm.bing.net/th/id/R-C.716d64f56e8fe0fb10d34a77db7594c6?rik=0LbQkS%2fj%2brGU1Q&riu=http%3a%2f%2fseopic.699pic.com%2fphoto%2f50063%2f5071.jpg_wh1200.jpg&ehk=g7Sgv%2f1K2B%2fT6E2cw2o6agEDHTvA2u78Q2MuM7QcJsI%3d&risl=&pid=ImgRaw&r=0')
  const [likeCount, setLikeCount] = useState(0)

  useEffect(()=>{
    if(location?.query?.id){
      getModification({id:location?.query?.id}).then(res=>{
        if(res.success){
          setDetatilsData(res.data)
          setLikeCount(res.data.likeCount)
          if(res.data.giftKey){
            getPublicDownloadUrl([res.data.giftKey]).then(re=>{
              if(re.data){
                setUrl(re.data)
              }}
            )
          }
        }
      })
    }
  },[location?.query?.id])

  const isJSON = (str:any) => {
    try{
      const ite = JSON.parse(str)
      return ite.map((i:any)=><div>{i.children[0]?.text}</div>)
    }catch{
      return str
    }
  }

  return (
    <Card style={{width:'1500px',margin:'0 auto'}} title={
      <div>
              <Row>
        <Col span={20}>
          <h2>{detatilsData?.title}</h2>
        </Col>
        <Col style={{textAlign:'right'}} span={4}>
          <Button onClick={()=>{
            likeModification({id:detatilsData?.id}).then(res=>{
              if(res.success){
                setLikeCount(likeCount+1)
                message.success('点赞成功')
              }
            })
          }} icon={<LikeOutlined style={{marginRight:'5px'}}/>}>{likeCount}</Button>
            <Button onClick={()=>{

          }} icon={<LikeOutlined style={{marginRight:'5px'}} rotate={180}/>}>{}</Button>
        </Col>
      </Row>
      <Row style={{color:'#999999'}}><Col><Avatar style={{height:'24px',width:'24px'}} src="https://joeschmoe.io/api/v1/random" /></Col><Col style={{marginLeft:'25px'}}>{detatilsData?.username || '张三'}</Col><Col style={{marginLeft:'25px'}}>{detatilsData?.createTime}</Col></Row>
      </div>
    } bordered={false} >
      <div >

      <div style={{textAlign:'center'}}>
        <img style={{width:'100%' , borderRadius:'15px'}} src={url} alt={' '}/>
      </div>
      {/* <div style={{marginTop:'30px'}} dangerouslySetInnerHTML={{ __html: (detatilsData?.content || "<h1> </h1>") }} /> */}
      <div style={{marginTop:'30px'}}>{isJSON(detatilsData?.content)}</div>
      <div style={{marginTop:'20px',textAlign:'right'}}>
        {/* <Button style={{marginRight:'90px'}} onClick={()=>history.push({pathname: '/systemSetup/documentLists/editor', search: `id=${detatilsData?.id}`,state: detatilsData})}>编辑</Button> */}
        <Button style={{marginRight:'60px'}} onClick={()=>history.go(-1)}>返回</Button>
      </div>
    </div>
    </Card>

  )
}